<script setup lang="jsx">
import {computed, markRaw, onMounted, ref} from 'vue';
import {Input, MessagePlugin} from 'tdesign-vue-next';
import {AddIcon, DeleteIcon} from "tdesign-icons-vue-next";
import {getSchemeDataAPI} from "../../apis/index.js";
import {useRoute} from "vue-router";

const Route = useRoute()

const align = ref('left');
const data = ref([]);



// 获取表数据
const getSchemeData = async (dbName, id, tableName) => {
  let res = await getSchemeDataAPI(dbName, id, tableName)
  console.log(res)
  columnsData_origin.value = res.data.colName
  res.data.colName.forEach((item) => {
    let columnItem = {
      title: item,
      colKey: item,
      align: align.value,
      height:50,
      // 编辑状态相关配置，全部集中在 edit
      edit: {
        // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性，且 onChange 的第一个参数值为 new value。
        // 2. 如果希望支持校验，组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
        component: markRaw(Input),
        // props, 透传全部属性到 Input 组件。可以是一个函数，不同行有不同的 props 属性 时，使用 Function）
        props: {
          clearable: true,
          autofocus: true,
        },
        // 触发校验的时机（when to validate)
        validateTrigger: 'change',
        // 透传给 component: Input 的事件（也可以在 edit.props 中添加）
        on: (editContext) => ({
          onBlur: () => {
            // console.log('失去焦点', editContext);
          },
          onEnter: (ctx) => {
            ctx?.e?.preventDefault();
            // console.log('onEnter', ctx);
          },
        }),
        // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
        abortEditOnEvent: ['onEnter'],
        // 编辑完成，退出编辑态后触发
        onEdited: (context) => {
          // console.log(context);
          const newData = [...data.value];
          newData.splice(context.rowIndex, 1, context.newRowData);
          data.value = newData;
          // console.log('Edit firstName:', context);
          MessagePlugin.success('修改成功');
        },
        // 校验规则，此处同 Form 表单。https://tdesign.tencent.com/vue-next/components/form
        rules: [
          {required: true, message: '不能为空'},
        ],
        // 默认是否为编辑状态
        defaultEditable: false,
      },
    }
    columnsData.value.push(columnItem)
  })

  console.log(columnsData)

  data.value = res.data.tableData

}


onMounted(() => {
  let {dbName, id, tableName} = Route.query
  getSchemeData(dbName, id, tableName)
})

// 用于控制哪些行或哪些单元格不允许出现编辑态，参数有 { row, col, rowIndex, colIndex }
const editableCellState = (cellParams) => {
  // 第一行不允许编辑
  const {row} = cellParams;
  return row.status !== 2;
};

const tableRef = ref(null);
// 用于提交前校验数据（示例代码有效，勿删）
const validateTableData = () => {
  // 仅校验处于编辑态的单元格
  tableRef.value.validateTableData().then((result) => {
    console.log('validate result: ', result);
  });
};

// 数据表数据
const columnsData_origin = ref([])
const columnsData = ref([
  // {
  //   title: 'variable',
  //   colKey: 'variable',
  //   align: align.value,
  //   // 编辑状态相关配置，全部集中在 edit
  //   edit: {
  //     // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性，且 onChange 的第一个参数值为 new value。
  //     // 2. 如果希望支持校验，组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
  //     component: Input,
  //     // props, 透传全部属性到 Input 组件。可以是一个函数，不同行有不同的 props 属性 时，使用 Function）
  //     props: {
  //       clearable: true,
  //       autofocus: true,
  //     },
  //     // 触发校验的时机（when to validate)
  //     validateTrigger: 'change',
  //     // 透传给 component: Input 的事件（也可以在 edit.props 中添加）
  //     on: (editContext) => ({
  //       onBlur: () => {
  //         console.log('失去焦点', editContext);
  //       },
  //       onEnter: (ctx) => {
  //         ctx?.e?.preventDefault();
  //         console.log('onEnter', ctx);
  //       },
  //     }),
  //     // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
  //     abortEditOnEvent: ['onEnter'],
  //     // 编辑完成，退出编辑态后触发
  //     onEdited: (context) => {
  //       console.log(context);
  //       const newData = [...data.value];
  //       newData.splice(context.rowIndex, 1, context.newRowData);
  //       data.value = newData;
  //       console.log('Edit firstName:', context);
  //       MessagePlugin.success('修改成功');
  //     },
  //     // 校验规则，此处同 Form 表单。https://tdesign.tencent.com/vue-next/components/form
  //     rules: [
  //       {required: true, message: '不能为空'},
  //     ],
  //     // 默认是否为编辑状态
  //     defaultEditable: true,
  //   },
  // },
  // {
  //   title: 'value',
  //   colKey: 'value',
  //   align: align.value,
  //   // 编辑状态相关配置，全部集中在 edit
  //   edit: {
  //     // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性，且 onChange 的第一个参数值为 new value。
  //     // 2. 如果希望支持校验，组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
  //     component: Input,
  //     // props, 透传全部属性到 Input 组件。可以是一个函数，不同行有不同的 props 属性 时，使用 Function）
  //     props: {
  //       clearable: true,
  //       autofocus: true,
  //     },
  //     // 触发校验的时机（when to validate)
  //     validateTrigger: 'change',
  //     // 透传给 component: Input 的事件（也可以在 edit.props 中添加）
  //     on: (editContext) => ({
  //       onBlur: () => {
  //         console.log('失去焦点', editContext);
  //       },
  //       onEnter: (ctx) => {
  //         ctx?.e?.preventDefault();
  //         console.log('onEnter', ctx);
  //       },
  //     }),
  //     // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
  //     abortEditOnEvent: ['onEnter'],
  //     // 编辑完成，退出编辑态后触发
  //     onEdited: (context) => {
  //       console.log(context);
  //       const newData = [...data.value];
  //       newData.splice(context.rowIndex, 1, context.newRowData);
  //       data.value = newData;
  //       console.log('Edit firstName:', context);
  //       MessagePlugin.success('修改成功');
  //     },
  //     // 校验规则，此处同 Form 表单。https://tdesign.tencent.com/vue-next/components/form
  //     rules: [
  //       {required: true, message: '不能为空'},
  //     ],
  //     // 默认是否为编辑状态
  //     defaultEditable: true,
  //   },
  // },
  // {
  //   title: 'set_time',
  //   colKey: 'set_time',
  //   align: align.value,
  //   // 编辑状态相关配置，全部集中在 edit
  //   edit: {
  //     // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性，且 onChange 的第一个参数值为 new value。
  //     // 2. 如果希望支持校验，组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
  //     component: Input,
  //     // props, 透传全部属性到 Input 组件。可以是一个函数，不同行有不同的 props 属性 时，使用 Function）
  //     props: {
  //       clearable: true,
  //       autofocus: true,
  //     },
  //     // 触发校验的时机（when to validate)
  //     validateTrigger: 'change',
  //     // 透传给 component: Input 的事件（也可以在 edit.props 中添加）
  //     on: (editContext) => ({
  //       onBlur: () => {
  //         console.log('失去焦点', editContext);
  //       },
  //       onEnter: (ctx) => {
  //         ctx?.e?.preventDefault();
  //         console.log('onEnter', ctx);
  //       },
  //     }),
  //     // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
  //     abortEditOnEvent: ['onEnter'],
  //     // 编辑完成，退出编辑态后触发
  //     onEdited: (context) => {
  //       console.log(context);
  //       const newData = [...data.value];
  //       newData.splice(context.rowIndex, 1, context.newRowData);
  //       data.value = newData;
  //       console.log('Edit firstName:', context);
  //       MessagePlugin.success('修改成功');
  //     },
  //     // 校验规则，此处同 Form 表单。https://tdesign.tencent.com/vue-next/components/form
  //     rules: [
  //       {required: true, message: '不能为空'},
  //     ],
  //     // 默认是否为编辑状态
  //     defaultEditable: true,
  //   },
  // },
  // {
  //   title: 'set_by',
  //   colKey: 'set_by',
  //   align: align.value,
  //   // 编辑状态相关配置，全部集中在 edit
  //   edit: {
  //     // 1. 支持任意组件。需保证组件包含 `value` 和 `onChange` 两个属性，且 onChange 的第一个参数值为 new value。
  //     // 2. 如果希望支持校验，组件还需包含 `status` 和 `tips` 属性。具体 API 含义参考 Input 组件
  //     component: Input,
  //     // props, 透传全部属性到 Input 组件。可以是一个函数，不同行有不同的 props 属性 时，使用 Function）
  //     props: {
  //       clearable: true,
  //       autofocus: true,
  //     },
  //     // 触发校验的时机（when to validate)
  //     validateTrigger: 'change',
  //     // 透传给 component: Input 的事件（也可以在 edit.props 中添加）
  //     on: (editContext) => ({
  //       onBlur: () => {
  //         console.log('失去焦点', editContext);
  //       },
  //       onEnter: (ctx) => {
  //         ctx?.e?.preventDefault();
  //         console.log('onEnter', ctx);
  //       },
  //     }),
  //     // 除了点击非自身元素退出编辑态之外，还有哪些事件退出编辑态
  //     abortEditOnEvent: ['onEnter'],
  //     // 编辑完成，退出编辑态后触发
  //     onEdited: (context) => {
  //       console.log(context);
  //       const newData = [...data.value];
  //       newData.splice(context.rowIndex, 1, context.newRowData);
  //       data.value = newData;
  //       console.log('Edit firstName:', context);
  //       MessagePlugin.success('修改成功');
  //     },
  //     // 校验规则，此处同 Form 表单。https://tdesign.tencent.com/vue-next/components/form
  //     rules: [
  //       {required: true, message: '不能为空'},
  //     ],
  //     // 默认是否为编辑状态
  //     defaultEditable: true,
  //   },
  // },
])

const columns = computed(() => {
  return columnsData.value
});

// todo
const newRow = () => {
  // console.log(data.value)

  let newRowData = columnsData_origin.value.reduce((result, key) => {
    result[key] = '';
    console.log(result)
    return result;
  }, {});
  // console.log(newRowData)
  data.value.push(newRowData)
}
const activeKeys =ref()

</script>

<template>
  <t-card shadow style="width: 100%;">
    <t-table
        ref="tableRef"
        row-key="id"
        :columns="columns"
        :data="data"
        :editable-cell-state="editableCellState"
        :bordered="true"
        lazy-load
    />
    <t-button theme="primary" style="margin-top: 10px" @click="newRow">
      <template #icon>
        <add-icon/>
      </template>
      新建行
    </t-button>
    <t-button theme="primary" style="margin-left: 20px;margin-top: 10px" @click="delRow">
      <template #icon>
        <delete-icon />
      </template>
      删除所选行
    </t-button>
  </t-card>
</template>

<style scoped>

</style>
